<template>
  <div class="plain-hd">
    <h2>
      {{ hd.hd_title }}
    </h2>
    <div class="more">
      <div class="tab-item " :id="'tabItem'+hd.id" v-for="(item,index) of hd.hd_tab_item">
        {{item}}
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery';
import PubSub from  'pubsub-js';
export default {
  name: "HomeMainPlainHD",
  props: {
    hd: Object
  },
  mounted() {
    const _this=this;
    const tabItem= $(`.more>#tabItem${this.hd.id}`);
    console.log(tabItem)
    tabItem.eq(0).addClass('active');
    tabItem.mouseenter(function () {
      const index=$(this).index()
      PubSub.publish(`tabIndex${_this.hd.id}`,index)
      $(this).addClass('active').siblings().removeClass('active')
    })
  }
}
</script>

<style scoped lang="scss">
.plain-hd {
  width: 100%;
  height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  h2 {
    font-size: 22px;
    font-weight: lighter;
  }

  .more {
    display: flex;

    .tab-item {
      margin-left: 30px;
      font-size: 16px;
      color: #424242;
      position: relative;
      transition: all 0.4s;
      &.active {
        color: #FF6700;
        transition: all 0.4s;
        &:after {
          content: '';
          position: absolute;
          bottom: -2px;
          width: 100%;
          height: 2px;
          left: 0;
          transition: all 0.4s;
          background-color: #FF6700;
        }
      }
    }
  }
}
</style>